<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '我的订单', navigationStyle: 'custom' },
}
</route>
<template>
  <view class="my-order">
    <view class="fixed-bg"></view>

    <view class="my-order__tab">
      <text
        v-for="item in tabs"
        :key="item.value"
        :class="{ active: currentTab === item.value }"
        @click="changeTab(item)"
        >{{ item.label }}</text
      >
    </view>
    <scroll-view class="my-order__scroll-view" scroll-y @scrolltolower="loadMore(true)">
      <view class="list">
        <OrderCard
          v-for="item in list"
          :item="item"
          class="mb-3 block"
          :key="item.id"
          @refresh="getList"
        />
        <c-load-more
          v-if="['more', 'noMore'].includes(loadType) && list.length > 0"
          loadingText="加载中..."
          :loadType="loadType"
        />
      </view>
      <c-empty v-if="list.length == 0" class="block mt-20" text="暂无订单" />
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getOrderPage } from '@/service/order';
  import OrderCard from './components/orderCard.vue';
  import scrollMixin from '@/hooks/scrollMixin';

  const { initLoad, loadMore, list, loadType } = scrollMixin();
  const tabs = [
    {
      label: '全部',
      value: '',
    },
    {
      label: '已付款',
      value: '3',
    },
    {
      label: '待付款',
      value: '1',
    },
    {
      label: '已过期',
      value: '2',
    },
  ];
  const currentTab = ref('');

  const changeTab = (item) => {
    currentTab.value = item.value;
    getList();
  };
  const getList = () => {
    initLoad({
      api: getOrderPage,
      params: {
        orderStatus: currentTab.value,
      },
    });
  };

  onShow(() => {
    getList();
  });
</script>

<style lang="scss" scoped>
  .my-order {
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    height: 100%;

    &__tab {
      display: flex;
      align-items: center;
      gap: 48rpx;
      color: $uni-text-color;
      padding: 32rpx;
      flex-shrink: 0;

      .active {
        color: $uni-color-primary;
        // font-size: 32rpx;
        font-weight: 600;
        transform: scale(1.1);
      }
    }
    &__scroll-view {
      flex: 1 0 0;
      height: 100%;
      .list {
        padding: 0 32rpx;
      }
    }
  }
</style>
